<!DOCTYPE html>
<html chrome_comp_test="text_align">
<head>
</head>
<body>

<p>1.</p>
<table border="1">
  <tr>
    <td width="400" style="text-align:center;" expectedProblems="RT8003">
      <div style="width:200px;">td text-align:center; &gt; div</div>
    </td>
  </tr>
</table>

<p>2.</p>
<div style="text-align:center; width:400px; border:1px solid;" expectedProblems="RT8003">
  <div style="width:200px; border:1px solid;">div text-align:center; &gt; div</div>
</div>

<p>3.</p>
<div style="text-align:right; width:400px; border:1px solid;" expectedProblems="RT8003">
  <div style="width:200px; border:1px solid;">div text-align:right; &gt; div</div>
</div>

<p>4.</p>
<div style="text-align:right; display:inline-block; width:400px; border:1px solid;" expectedProblems="RT8003">
  <div style="width:200px; border:1px solid;">div text-align:right; display:inline-block; &gt; div</div>
</div>
<span>text after inline-block div</span>

<p>5.</p>
<div style="text-align:center; width:400px; border:1px solid;" expectedProblems="RT8003">
  <b>div text-align:center;</b> &gt; div (with blank text and visible border)
  <div style="width:200px; border:1px solid;"> </div>
</div>

<p>6.</p>
<div style="text-align:center; width:350px; border:1px solid; padding-left:50px;" expectedProblems="RT8003">
  <div style="width:100px; border:1px solid; margin-left:20px;">
    <b>div text-align:center;</b>
    &gt; div (parent container box has padding, and childer box has maring.)
  </div>
</div>

<p>6.DIV text-align:center, it height is 1px and not text and has not border, but has background.</p>
<div style="text-align:center; width:350px; border:1px solid;" expectedProblems="RT8003">
  <div style="width:100px; border:0 none; height:1px; overflow:hidden; background:gray;">
  </div>
</div>

<hr/>


<h2>The followings don't have problems</h2>

<p>A1.</p>
<div style="text-align:center; width:400px; border:1px solid;">
  <div style="display:inline-block; width:200px; border:1px solid;">div text-align:center; &gt; div display:inline-block;</div>
</div>

<p>A2.</p>
<div style="text-align:left; width:400px; border:1px solid;">
  <div style="width:200px; border:1px solid;">div text-align:left; &gt; div</div>
</div>

<p>A3.</p>
<div style="text-align:right; direction:rtl; width:400px; border:1px solid;">
  <div style="width:200px; border:1px solid;">div text-align:right; direction:rtl; &gt; div</div>
</div>

<p>A4.</p>
<div style="text-align:center; width:400px; border:1px solid;">
  <div style="float:left; width:200px; border:1px solid;">div text-align:center; &gt; div float:left;</div>
</div>
<div style="clear:both"></div>

<p>A5.</p>
<div style="text-align:center; width:400px; border:1px solid;">
  <b>div text-align:center;</b> &gt; br
  <br style="display:block; width:200px; border:1px solid;" />
</div>

<p>A6.</p>
<div style="text-align:center; width:400px; border:1px solid;">
  <b>div text-align:center;</b> &gt; div (with blank text and no border)
  <div style="width:200px;"> </div>
</div>

<p>A7.</p>
<div style="text-align:center; width:200px; border:1px solid; padding:0 100px;">
  <div style="width:400px; border:1px solid;">
    <b>div text-align:center; width:200px; padding:0 100px;</b> &gt; div width:400px; (overflow container box)
  </div>
</div>

<p>A8.</p>
<div style="text-align:right; width:200px; border:1px solid; padding:0 100px;">
  <div style="width:400px; border:1px solid;">
    <b>div text-align:right; width:200px; padding:0 100px; </b> &gt; div width:400px; (overflow container box)
  </div>
</div>


<p>A9.</p>
<div style="text-align:center; width:400px; border:1px solid;">
  <div style="width:200px; border:1px solid; margin:0 auto;">
    <b>div'text-align:center;'</b> &gt; div 'margin:0 auto'
  </div>
</div>

<p>A10.</p>
<div style="text-align:left; width:400px; border:1px solid;">
  <div style="width:200px; border:1px solid; margin:0 auto;">
    <b>div'text-align:left;'</b> &gt; div 'margin:0 auto'
  </div>
</div>

<p>A11.</p>
<div style="text-align:right; width:400px; border:1px solid;">
  <div id="aa" style="width:200px; border:1px solid; margin:0 auto;">
     <b>div'text-align:right;'</b> &gt; div 'margin:0 auto'
  </div>
</div>

<p>A12.</p>
<div style="width:400px; border:1px solid black; text-align:center;">
  <div style="float:left; width:150px; border:1px solid black;">div float:left</div>
  <div style="width:200px; border:1px solid black;">div text-align:center</div>
</div>

<p>A13.</p>
<div style="width:400px; border:1px solid black; text-align:right;">
  <div style="width:150px; border:1px solid black; margin-right:auto; margin-left:10px;">
    <b>div'text-align:right;'</b> &gt; div 'margin-right:auto; margin-left:10px;'
  </div>
</div>

<p>A14.</p>
<div style="width:400px; border:1px solid black; text-align:left;">
  <div style="width:150px; border:1px solid black; margin-left:auto; margin-right:10px;">
    <b>div'text-align:left;'</b> &gt; div 'margin-left:auto; margin-right:10px;'
  </div>
</div>

<p>A15.</p>
<div style="width:400px; border:1px solid black; text-align:center;">
  <div style="float:left; width:150px; border:1px solid black;">div float:left</div>
</div>

<p>(End of test)</p>

</body>
</html>
